<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: hucc
 * @LastEditTime: 2021-09-23 20:08:34
-->
<template>
  <!-- 2.创建容器 容纳图表 -->
  <div ref="root" style="height: 150px"></div>
</template>
<script>
import { Liquid } from "@antv/g2plot";
export default {
  //1.引入组件
  data() {
    return {};
  },
  mounted(){
    this.initCharts();
  },
  methods: {
    initCharts() {
      //3.创建图表实例
      let liquid = new Liquid(this.$refs["root"], {
        percent: 0.75,
        outline: {
          border: 3,
          distance: 0,
        },
        wave: {
          length: 128,
        },
      });
      // 4.渲染
      liquid.render();
    },
  },
};
</script>




